// pages/home/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    movableAreaWidth: 0, //滑块宽度
    windowWidth: 0, //屏幕宽度
    currentTab: 0, //预设当前项的值
    scrollLeft: 1, //tab标题的滚动条位置
    headMovaLne: 30, //顶部导航栏小红条宽度
    navX: 0, //顶部列表下标
    itemX: 0, //限时秒杀小红条移动单位
    movaLen: 0, //限时秒杀小红条长度
    tabItemWidth: 0, //tab选项单个宽度
    rectWidth: 0, //节点宽度,获取不同分辨率下顶部导航栏单个选项文字大小
    //顶部导航栏列表
    itemList: [{
      text: '热门'
    }, {
      text: '男装'
    }, {
      text: '鞋包'
    }, {
      text: '手机'
    }, {
      text: '电器'
    }, {
      text: '食品'
    }, {
      text: '电脑'
    }, {
      text: '百货'
    }, {
      text: '服饰'
    }, {
      text: '汽车'
    }, {
      text: '家装'
    }, {
      text: '运动'
    }, {
      text: '母婴'
    }, {
      text: '家装'
    }, {
      text: '运动'
    }, {
      text: '母婴'
    }, {
      text: '母婴'
    }, {
      text: '家装'
    }, {
      text: '运动'
    }, {
      text: '母婴'
    }, {
      text: '母婴'
    }, {
      text: '家装'
    }, {
      text: '运动'
    }, {
      text: '母婴'
    }],
    //swiper组件参数
    imgUrls: [{
        goodsId: 1,
        url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
      },
      {
        goodsId: 2,
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
      },
      {
        goodsId: 3,
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    indicatorColor: "white", //滑动圆点颜色
    indicatorActiveColor: "red", //当前圆点颜色
    //限时秒杀栏列表数据
    item: [
      [{
        url: '/images/home/seckill.png',
        text: '限时秒杀'
      }, {
        url: '/images/home/manhelp.png',
          text: '男人帮'
      }],
      [{
        url: '/images/home/brand.png',
        text: '品牌清仓'
      }, {
          url: '/images/home/sale.png',
        text: '9块9特卖'
      }],
      [{
        url: '/images/home/discount.png',
        text: '名品折扣'
      }, {
        url: '/images/home/sign.png',
          text: '现金签到'
      }],
      [{
        url: '/images/home/money.png',
        text: '天天领现金'
      }, {
        url: '/images/home/food.png',
          text: '食品超市'
      }],
      [{
        url: '/images/home/single.png',
        text: '助力享免单'
      }, {
          url: '/images/home/bargain.png',
          text: '砍价免费拿'
      }],
      [{
        url: '/images/home/seckill.png',
        text: '限时秒杀'
      }, {
          url: '/images/home/seckill.png',
        text: '限时秒杀'
      }],
      [{
        url: '/images/home/seckill.png',
        text: '限时秒杀'
      }, {
          url: '/images/home/seckill.png',
        text: '限时秒杀'
        }],
      [{
        url: '/images/home/single.png',
        text: '助力享免单'
      }, {
        url: '/images/home/bargain.png',
        text: '砍价免费拿'
      }],
      [{
        url: '/images/home/seckill.png',
        text: '限时秒杀'
      }, {
        url: '/images/home/seckill.png',
        text: '限时秒杀'
      }],
      [{
        url: '/images/home/seckill.png',
        text: '限时秒杀'
      }, {
        url: '/images/home/seckill.png',
        text: '限时秒杀'
      }]
    ],
    //新人特价商品图片
    newGoodsList: [{
      goodsId: 1,
      url: '/images/home/newGoodsPic1.png',
      text: '夏季女生时尚棉麻裤'
    }, {
      goodsId: 2,
      url: '/images/home/newGoodsPic2.png',
      text: '夏季女生时尚棉麻裤'
    }, {
      goodsId: 3,
      url: '/images/home/newGoodsPic3.png',
      text: '夏季女生时尚棉麻裤'
    }, ],
    manGoods: [{
      typeId: 1,
      text: '爆款',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 2,
      text: 'T恤',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 3,
      text: 'POLO衫',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 4,
      text: '套装',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 5,
      text: '衬衫',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 6,
      text: '休闲裤',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 7,
      text: 'T牛仔裤',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 8,
      text: '短裤',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 9,
      text: '夹克',
      itemImg: '/images/menswear/goods.png'
    }, {
      typeId: 10,
      text: '查看全部',
      itemImg: '/images/menswear/goods.png'
    }, ],
    //马上抢列表数据
    robList: [{
        goodsId: 1,
        url: '/images/home/mi.png',
        text: '【小米官方正品】 小米体感智能平衡车 体验智能 骑行',
        alonePrice: 1988,
        groupPrice: 0.01
      },
      {
        goodsId: 2,
        url: '/images/home/mi.png',
        text: '【小米官方正品】 小米体感智能平衡车 体验智能 骑行',
        alonePrice: 1988,
        groupPrice: 0.01
      },
      {
        goodsId: 3,
        url: '/images/home/mi.png',
        text: '【小米官方正品】 小米体感智能平衡车 体验智能 骑行',
        alonePrice: 1988,
        groupPrice: 0.01
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    this.getRect()
    var headMovaLne =  this.data.itemList[0].text.length * 29 //计算顶部导航栏小红条初始长度
    var movaLen = 200 / this.data.item.length  //计算限时秒杀栏小红条长度
    this.setData({
      movaLen,
      headMovaLne
    })
  },
  /**
   * 获取不同屏幕节点大小，不同屏幕自适应
   */
  getRect: function () {
    var that = this
    wx.createSelectorQuery().select('#itemID').boundingClientRect(function (rect) {
      var rectWidth = rect.width / 2
      that.setData({
        rectWidth,
      })
    }).exec()
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    console.log(this.data.currentTab)

  },

  /**
   * 顶部导航栏滑动事件
   */
  tabTap: function(e) {
    var movableAreaWidth = e.detail.scrollWidth   //将scroll-view 组件宽度赋值给movable组件，使其自适应
    var tabItemWidth = e.detail.scrollWidth / this.data.itemList.length //计算单个导航标题宽度
    this.setData({
      tabItemWidth,
      movableAreaWidth
    })
  },
  // 点击标题切换当前页时改变样式和Tab列表位置
  swichNav: function(e) {
    var cur = e.currentTarget.dataset.index;  //获取当前点击标题下标
    if (this.data.currentTab == cur) {
      return false;
    }
    var headMovaLne = this.data.itemList[cur].text.length * 29 //计算顶部导航栏小红条初始长度
    console.log(headMovaLne)
    this.setData({
      headMovaLne
    })
    /**
     * 根据节点信息，计算导航栏小红条滑动距离
     */
    var x = 0 
    for (var i = 0; i < cur; i++) {
      x += this.data.itemList[i].text.length * this.data.rectWidth + 20
    }
    this.setData({
      currentTab: cur,
      navX: x,
    })
    this.checkCor();
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function() {
    var currentTab = this.data.currentTab   //获取当前点击标题下标，如果下标大于4，scroll-view组件才发生位移
    if (currentTab > 4) {
      var scrollLeft = (currentTab - 3) * this.data.tabItemWidth
      console.log(scrollLeft)
      this.setData({
        scrollLeft,
      })
      console.log(scrollLeft)
    } else {
      this.setData({
        scrollLeft: 0,
      })
    }
  },
  /**
   * 限时秒杀栏小红条位置变化，根据scroll-view组件长度和滑动，比出小红条滑动距离
   */
  weightScroll: function(e) {
    var scrollLeft = e.detail.scrollLeft
    var scrollWidth = e.detail.scrollWidth
    var movable = scrollLeft * 200 / scrollWidth
    this.setData({
      itemX: movable
    })
  },
  /**
   * 当前页面是热门是商品类型点击事件，跳转至分类商品列表
   */
  goTypeTap: function(e) {
    console.log(e)
    console.log(e.currentTarget.dataset.id)
    var typeId = e.currentTarget.dataset.id || null
    if (!typeId) {
      return
    }
    wx.navigateTo({
      url: '../details/index?typeId=' + typeId,
    })
  },
  /**
   * swiper组件点击事件，获取商品Id,跳转至详情页，传入商品ID
   */
  onItemClick: function(e) {
    console.log(e.target.dataset.id)
    var goodsId = e.target.dataset.id || null
    if (!goodsId) {
      return
    }
    wx.navigateTo({
      url: '../details/index?goodsId=' + goodsId,
    })
  },
  /**
   * 新人特价商品栏点击事件，获取商品Id,跳转至详情页，传入商品ID
   */
  goShoppingTap: function(e) {
    console.log(e)
    console.log(e.currentTarget.dataset.id)
    var goodsId = e.currentTarget.dataset.id || null
    if (!goodsId) {
      return
    }
    wx.navigateTo({
      url: '../details/index?goodsId=' + goodsId,
    })
  },
  /**
   * 马上抢列表点击事件，获取商品Id,跳转至详情页，传入商品ID
   */
  goRapTap: function(e) {
    console.log(e)
    console.log(e.currentTarget.dataset.id)
    var goodsId = e.currentTarget.dataset.id || null
    if (!goodsId) {
      return
    }
    wx.navigateTo({
      url: '../details/index?goodsId=' + goodsId,
    })
  },
})